<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="评论列表"
      :columns="columns"
      :request-api="getTableList"
      :init-param="initParam"
      :data-callback="dataCallback"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button v-auth="'add'" type="primary" @click="openDrawer('新增')"> 新增评论 </el-button>
        <!--  v-auth="'add'" -->
        <!-- <el-button v-auth="'batchAdd'" type="primary" :icon="Upload" plain @click="batchAdd"> 批量添加用户 </el-button>
        <el-button v-auth="'export'" type="primary" :icon="Download" plain @click="downloadFile"> 导出用户数据 </el-button> -->
        <!-- <el-button type="primary" plain @click="toDetail"> To 子集详情页面 </el-button> -->
        <!-- <el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected" @click="batchDelete(scope.selectedListIds)">
          批量删除用户
        </el-button> -->
      </template>
      <!-- Expand -->
      <template #expand="scope">
        {{ scope.row }}
      </template>
      <!-- usernameHeader -->
      <template #usernameHeader="scope">
        <el-button type="primary" @click="ElMessage.success('我是通过作用域插槽渲染的表头')">
          {{ scope.column.label }}
        </el-button>
      </template>
      <!-- createTime -->
      <template #isAnswer="scope">
        <!-- <el-button type="primary" link @click="ElMessage.success('我是通过作用域插槽渲染的内容')"> -->
        {{ scope.row.isAnswer ? "是" : "否" }}
        <!-- </el-button> -->
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button v-auth="'get'" type="primary" link @click="openDrawer('查看', scope.row)"> 查看 </el-button>
        <!-- <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)"> 编辑 </el-button> -->
        <!-- <el-button type="primary" link :icon="Refresh" @click="careful(scope.row)"> 审核 </el-button> -->
        <el-button v-auth="'delete'" type="primary" link @click="deleteAccount(scope.row)"> 删除 </el-button>
        <!-- <el-button type="primary" link :icon="EditPen" @click="comment(scope.row)"> 评论 </el-button> -->
      </template>
    </ProTable>
    <commentDrawer ref="drawerRef" />
    <!-- <ImportExcel ref="dialogRef" /> -->
  </div>
</template>

<script setup lang="tsx" name="useProTable">
import { ref, reactive, onMounted, toRaw } from "vue";
import { useRoute } from "vue-router";
import { Question } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
// import { useDownload } from "@/hooks/useDownload";
// import { useAuthButtons } from "@/hooks/useAuthButtons";
import { ElMessage } from "element-plus"; // ElMessageBox
import ProTable from "@/components/ProTable/index.vue";
// import ImportExcel from "@/components/ImportExcel/index.vue";
import commentDrawer from "./commentDrawer.vue";
//import { genderType } from "@/utils/serviceDict"; // userStatus
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
// import { CirclePlus, Delete, View } from "@element-plus/icons-vue"; // Download, Upload,
import { getDict, deleteComment, getCommentById, addComment } from "@/api/modules/sys";

const route = useRoute();
// const cxt = getCurrentInstance();
// const dict = cxt?.appContext.config.globalProperties.$dict;
// const carefulList = ref([]);

// 跳转详情页
// const toDetail = () => {
//   router.push(`/proTable/useProTable/detail/${Math.random().toFixed(3)}?params=detail-page`);
// };

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1 });
// 获取字典数据
// const getDicList = async (params: Dict.ResDictList) => {
//   const { data } = await getDict(params);
//   return data || [];
// };
// 加载字典数据
// const loadNode = async (node: Node, resolve: (data: Dict.ResDictList[]) => void) => {
//   if (node.value) {
//     const { data } = await getDict({ parentId: node.value });
//     resolve(data);
//   }
// };
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
  // if (!data) {
  //   return {
  //     list: [],
  //     total: 0,
  //     pageNum: 0,
  //     pageSize: 0
  //   };
  // } else {
  // data.records =
  //   data.records &&
  //   data.records.map(item => {
  //     let obj = carefulList.value.find(itm => itm.id == item.status);
  //     if (obj) {
  //       item.auditStatus = obj.name;
  //     }
  //     return item;
  //   });
  return {
    list: data.records,
    total: Number(data.total),
    pageNum: Number(data.current),
    pageSize: Number(data.size)
  };
  //}
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = async (params: any) => {
  // let newParams = JSON.parse(JSON.stringify(params));
  // newParams.createTime && (newParams.startTime = newParams.createTime[0]);
  // newParams.createTime && (newParams.endTime = newParams.createTime[1]);
  // delete newParams.createTime;
  // carefulList.value = await getDicList({ parentId: dict.answerStatus });
  // questionDic.value = questionDic.value.map(item => {
  //   return {
  //     label: item.name,
  //     id: item.id
  //   };
  // });
  // 处理请求参数
  const newParams = {
    currentPage: params.pageNum,
    relatedId: toRaw(route).query.answerId
  };
  // newParams
  return getCommentById(newParams);
};

// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
// const { BUTTONS } = useAuthButtons();

// 自定义渲染表头（使用tsx语法）
// const headerRender = (scope: HeaderRenderScope<User.ResUserList>) => {
//   return <el-button type="primary">{scope.column.label}</el-button>;
// };

// 表格配置项
const columns: ColumnProps<Question.ResQuestionList>[] = [
  // { type: "selection", fixed: "left", width: 80 },
  { type: "index", label: "#", width: 80 },
  // { type: "expand", label: "Expand", width: 100 },
  {
    prop: "userName",
    label: "用户名"
  },
  // {
  //   prop: "typeId",
  //   label: "分类",
  //   enum: () => getDict({ parentId: dict.questionId }),
  //   fieldNames: { label: "name", value: "id" },
  //   isShow: false,
  //   search: {
  //     el: "cascader",
  //     props: {
  //       defaultValue: [],
  //       isShow: true,
  //       props: { checkStrictly: true, lazy: true, lazyLoad: loadNode, label: "name", value: "id" }
  //     }
  //   }
  //   // 字典数据
  //   // enum: genderType,
  //   // 字典请求不带参数
  //   // enum: questionDic.value,
  //   // // 字典请求携带参数
  //   // // enum: () => getUserGender({ id: 1 }),
  //   // render: scope => {
  //   //   return <div>{questionDic.value.find(itm => itm.id == scope.row.typeId)?.name}</div>;
  // },
  {
    prop: "content",
    label: "内容"
  },
  { prop: "likeNumber", label: "点赞数" },
  {
    prop: "remark",
    label: "备注"
  },
  // {
  //   prop: "status",
  //   label: "状态",
  //   render: scope => {
  //     return <div>{carefulList.value.find(itm => itm.id == scope.row.status)?.name}</div>;
  //   }
  // },
  // {
  //   prop: "status",
  //   label: "用户状态",
  //   enum: userStatus,
  //   search: { el: "tree-select", props: { filterable: true } },
  //   render: scope => {
  //     return (
  //       <>
  //         {BUTTONS.value.status ? (
  //           <el-switch
  //             model-value={scope.row.status}
  //             active-text={scope.row.status ? "正常" : "禁用"}
  //             active-value={1}
  //             inactive-value={0}
  //             onClick={() => changeStatus(scope.row)}
  //           />
  //         ) : (
  //           <el-tag type={scope.row.status ? "success" : "danger"}>{scope.row.status ? "正常" : "禁用"}</el-tag>
  //         )}
  //       </>
  //     );
  //   }
  // },
  // {
  //   prop: "gmtCreate",
  //   label: "创建时间",
  //   width: 180,
  //   search: {
  //     el: "date-picker",
  //     span: 2,
  //     props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
  //     defaultValue: ["2022-11-12 11:35:00", "2022-12-12 11:35:00"]
  //   }
  // },
  // {
  //   prop: "gmtModified",
  //   label: "修改时间",
  //   width: 180,
  //   search: {
  //     el: "date-picker",
  //     span: 2,
  //     props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
  //     defaultValue: ["2022-11-12 11:35:00", "2022-12-12 11:35:00"]
  //   }
  // },
  { prop: "operation", label: "操作", fixed: "right", width: 390 }
];

// 删除回答信息
const deleteAccount = async (params: Question.ResQuestionList) => {
  await useHandleData(deleteComment, { id: params.id }, `删除评论`);
  proTable.value?.getTableList();
};
//// 审核回答信息
// const careful = async (params: Question.ResQuestionList) => {
//   reviewHandle({
//     id: params.id,
//     remark: params.auditMessage,
//     list: carefulList.value,
//     typeId: params.status,
//     flag: dict.answerStatus,
//     getTableList: proTable.value?.getTableList
//   });
// };
// comment

// const comment = (params: Question.ResQuestionList) => {
//   router.push(`/article/commentManage?commentId=${params.id}`);
// };
// 批量删除用户信息
// const batchDelete = async (id: string[]) => {
//   await useHandleData(deleteUser, { id }, "删除所选用户信息");
//   proTable.value?.clearSelection();
//   proTable.value?.getTableList();
// };

// 重置用户密码
// const resetPass = async (params: Question.ResQuestionList) => {
//   await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.name}】用户密码`);
//   proTable.value?.getTableList();
// };

// 切换用户状态
// const changeStatus = async (row: User.ResUserList) => {
//   await useHandleData(changeUserStatus, { id: row.id, status: row.status == 1 ? 0 : 1 }, `切换【${row.name}】用户状态`);
//   proTable.value?.getTableList();
// };

// 导出用户列表
// const downloadFile = async () => {
//   ElMessageBox.confirm("确认导出用户数据?", "温馨提示", { type: "warning" }).then(() =>
//     useDownload(exportUserInfo, "用户列表", proTable.value?.searchParam)
//   );
// };

// 批量添加用户
// const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null);
// const batchAdd = () => {
//   const params = {
//     title: "用户",
//     tempApi: exportUserInfo,
//     importApi: BatchAddUser,
//     getTableList: proTable.value?.getTableList
//   };
//   dialogRef.value?.acceptParams(params);
// };

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof commentDrawer> | null>(null);
const openDrawer = async (title: string, row: Partial<Question.ResQuestionList> = {}) => {
  row.relatedId = toRaw(route).query.answerId;
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: addComment,
    getDict,
    getTableList: proTable.value?.getTableList
  };
  drawerRef.value?.acceptParams(params);
};
onMounted(async () => {
  // console.log(carefulList.value);
});
</script>
<style lang="scss">
.table-box {
  .title {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 20px;
    margin-bottom: 10px;
    background: var(--el-bg-color);
    border-radius: 4px;
  }
}
</style>
